<template>
  <div>
    姓：<input type="text" v-model="person.firstName">
    <br>
    名：<input type="text" v-model="person.lastName">
    <br>
    全名：<input type="text" v-model="person.fullName">
  </div>
</template>

<script>
import { computed, reactive } from "vue";

export default {
  name: 'test_computed',
  // vue2 中是这样写的
  // computed: {
  //   fullName() {
  //     return this.person.firstName + this.person.lastName
  //   }
  // },
  setup() {
    let person = reactive({
      firstName: '张',
      lastName: '三',
    })

    // vue3中可以直接这样写计算属性，这是简写方式
    // person.fullName = computed(() => {
    //   return person.firstName + person.lastName
    // })

    // vue3中计算属性的完整写法
    person.fullName = computed({
      get() {
        return person.firstName + person.lastName
      },
      set(value) {
        person.firstName = value[0] || ''
        person.lastName = value[1] || ''
      }
    })

    return {
      person,
    }
  }


}
</script>

